<script setup>
import Header from "@/modules/module4/modules4-War/components/Header.vue";
import sideshow from "@/modules/module4/modules4-War/components/SideShow.vue";
</script>
<template>
    <div class="contain">
        <Header />
  <sideshow />
     <div class="container">
        <img src="../assets/image/410.jpg" alt="示例图片">
        <div class="description">
            <h2>辽沈战役</h2>
            <pre>
                地点: 辽东半岛、热河、河北
                指挥官: 林彪、罗荣桓 (中国人民解放军)
                目标: 解放东北全境
                结果: 中国人民解放军攻占了沈阳、长春等重要城市，歼灭了国民党在东北的主力部队，使东北全境获得解放。
            </pre>
        </div>
    </div>
    <div class="container">
       
        <div class="description">
            <h2>平津战役</h2>
            <pre>
                地点: 北京、天津、河北
                指挥官: 林彪、罗荣桓、聂荣臻 (中国人民解放军)
                目标: 解放华北
                结果: 中国人民解放军攻占了天津，迫使北平（今北京）和平解放，结束了华北地区的战事，为中国内战的胜利奠定了基础。
            </pre>
        </div>
         <img src="../assets/image/408.jpg" alt="示例图片">
    </div>
    <div class="container">
        <img src="../assets/image/409.jpg" alt="示例图片">
        <div class="description">
            <h2>淮海战役</h2>
            <pre>
                地点: 江苏、安徽、河南
                指挥官: 邓小平、刘伯承、陈毅、粟裕 (中国人民解放军)
                目标: 消灭国民党在华东的主力部队
                结果: 中国人民解放军在徐蚌地区歼灭了国民党军数十万，控制了华东、中原广大地区，为进军长江以南奠定了基础。
            </pre>
        </div>
    </div>
    </div>
</template>
<style>
.contain {
  font-family: "microsoft yahei, arial, helvetica, sans-serif";
  font-size: 16px;
  background-image: url("../assets/image/400.jpeg"); /* 确保路径正确 */
  background-size: cover; /* 覆盖整个页面 */
  background-position: center; /* 居中显示 */
  background-attachment: fixed; /* 固定背景，不随滚动条滚动 */
}
   /* 设置容器样式 */
.container {
    display: flex;            /* 使用 Flexbox 布局 */
    align-items: center;      /* 垂直居中 */
    padding: 20px;            /* 内边距 */
    background-color: rgba(255, 255, 255, 0); /* 背景颜色，半透明 */
    border-radius: 10px;      /* 圆角 */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0); /* 阴影 */
}

/* 设置图片样式 */
.container img {
    height: 200px;            /* 图片高度为 100px */
    width: auto;              /* 宽度自动调整以保持等比缩放 */
    transition: transform 0.3s ease; /* 过渡效果 */
    border-radius: 5px;       /* 图片圆角 */
}

/* 鼠标悬停时图片放大 */
.container img:hover {
    transform: scale(1.05);   /* 放大 5% */
}

/* 设置文字描述样式 */
.description {
    margin-left: 20px;        /* 左边距 */
    color: #333;              /* 文字颜色 */
}

.description h2 {
    margin-top: 0;            /* 去除标题的上边距 */
}

.description p {
    line-height: 1.6;         /* 段落行高 */
}
</style>